<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2790765_pqm82v7ytg.css">
    <script src="sport.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;
            position: relative;
            overflow: hidden;
        }

        .wrap .dotBar {
            position: absolute;
            right: 50px;
            bottom: 20px;
            display: flex;
            text-align: center;
            line-height: 45px;
            z-index: 999;
        }

        .wrap .dotBar li {
            flex: 1;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #fff;
            border: 2px solid hsla(0, 0%, 100%, .3);
            font-size: 0;
            margin: 0 4px;
        }

        .wrap .dotBar li:hover {
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
        }

        .wrap .dotBar .active {
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
        }

        .slideBar {
            /* width: 6130px; */
            /* 父元素的宽度 由子元素撑开 */
            width: max-content;
            overflow: hidden;
            position: relative;
        }

        .slideBar li {
            width: 1226px;
            background-color: #6ff;
            text-align: center;
            float: left;
        }

        .slideBar li img {
            width: 100%;
        }

        .slideBar .show {
            display: block;
        }

        .wrap:hover .left,
        .wrap:hover .right {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
        }

        .wrap .left,
        .wrap .right {
            width: 60px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .wrap .iconfont {
            font-size: 40px;
        }

        .wrap .left {
            left: 0;
        }

        .wrap .right {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left"><i class="iconfont icon-left"></i></div>
        <div class="right"><i class="iconfont icon-right"></i></div>
        <ul class="dotBar">

        </ul>
        <ul class="slideBar">

            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.webp" alt=""></li>
            <li><img src="./images/4.webp" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>

        </ul>
    </div>
</body>
<script src="common.js"></script>
<script src="sport.js"></script>
<script>
    // 1、获取到dom对象
    const wrapDom = document.querySelector('.wrap');
    const leftDom = document.querySelector('.left');
    const rightDom = document.querySelector('.right');
    const dotBarDom = document.querySelector('.dotBar');
    const slideBarDom = document.querySelector('.slideBar');
    // 保存定时器标识的全局变量
    let timer;
    // index表示现在显示的图片序号 以7张图片计算  范围在0-6之间
    // index记录当前显示的图片序号，是为了后期每次定时器调用计算出下一张图片 以及对应的left值
    let index = 1;
    // 获取到轮播图可视区宽度
    const wrapWdith = wrapDom.clientWidth;
    // 2、创建小圆点
    createDot();
    // 3、追加前后的图片
    createLiTag();
    // 3、实现自动切换
    autoPlay();
    // 4、实现鼠标划入与划出
    wrapDom.addEventListener('mouseover', () => {
        // 停止自动切换图片
        clearInterval(timer);
    })
    wrapDom.addEventListener('mouseout', () => {
        // 继续执行自动换图
        autoPlay();
    })
    // 5、左右箭头的点击事件
    rightDom.addEventListener('click', () => {
        index++;
        move();
    })
    leftDom.addEventListener('click', () => {
        index--;
        move();
    })
    // 6、使用委托实现小圆点的点击功能
    dotBarDom.addEventListener('click', event => {
        if (event.target.nodeName == 'LI') {
            // 点击的是小圆点
            // 获取点击的小圆点序号 为0-4之间的值
            let dataIndex = event.target.getAttribute('data-index');
            // 如果取出小圆点的序号是0 真正index为1 
            index = dataIndex - 0 + 1;
            move();
        }
    })
    // 自动的切换图片
    function autoPlay() {
        // 定时器执行每次切换图片操作
        timer = setInterval(() => {
            // 修改下一张显示的图片序号记录
            index++;
            move();
        }, 3000)
    }
    // 实现切换图片的函数
    function move() {
        console.log('index=' + index)
        // 小圆点的跟随 使用排他思想 先将所有的小圆点全部设置为白色 将当前图片所对应的哪一个小圆点设置为灰色
        // 将小圆点的样式取出
        for (let i = 0; i < dotBarDom.children.length; i++) {
            dotBarDom.children[i].className = '';
        }
        let activeIndex;
        /*
            index变量记录着现在显示的哪一个图片 取值为0-6之间的数字  但是需要注意 小圆点只有5个 使用0-4表示
            当index=0 显示的是第1张图，原图5张为图片5  activeIndex = 4
            当index=1 显示的是第2张图，原图5张为图片1  activeIndex = 0
            当index=2 显示的是第3张图，原图5张为图片2  activeIndex = 1
            当index=3 显示的是第4张图，原图5张为图片3  activeIndex = 2
            当index=4 显示的是第5张图，原图5张为图片4  activeIndex = 3
            当index=5 显示的是第6张图，原图5张为图片5  activeIndex = 4
            当index=6 显示的是第7张图，原图5张为图片1  activeIndex = 0
        */
        if (index == 0) {
            activeIndex = dotBarDom.children.length - 1;
        } else if (index == dotBarDom.children.length + 1) {
            activeIndex = 0;
        } else {
            activeIndex = index - 1;
        }
        // 将当前图片对应的圆点设置特殊样式
        dotBarDom.children[activeIndex].className = 'active';
        // 使用动画方式显示出下一张图片
        annimate(slideBarDom, {
            left: -index * wrapWdith
        }, playEnd)
    }
    // 当每次切换图片结束之后的回调 用于处理 index修正
    function playEnd() {
        // 一旦运行到最后一张图片 需要将index重置为1
        if (index == slideBarDom.children.length - 1) {
            index = 1;
            slideBarDom.style.left = -index * wrapWdith + 'px';
        }
        // 一旦index等于0 需要立马设置显示到图片5
        if (index == 0) {
            index = slideBarDom.children.length - 2;
            slideBarDom.style.left = -index * wrapWdith + 'px';
        }
    }
    // 追加前后的图片
    function createLiTag() {
        // 克隆第一张图片的li标签
        let firstLiClone = slideBarDom.firstElementChild.cloneNode(true);
        // 克隆最后一张图片的li标签
        let lastLiClone = slideBarDom.lastElementChild.cloneNode(true);
        // 将克隆的第一个li 加入到末尾
        slideBarDom.appendChild(firstLiClone);
        // 将克隆的最后一个li 加入到开始位置
        slideBarDom.insertBefore(lastLiClone, slideBarDom.firstElementChild);
        // 重新修改slideBar宽度
        slideBarDom.style.width = slideBarDom.children.length * wrapWdith + 'px'
        // 设置slideBar的left值控制默认显示真正的第一张图片
        slideBarDom.style.left = -wrapWdith + 'px'
    }
    // 创建小圆点的函数
    function createDot() {
        // 获取现有的slideBar下面的li标签长度
        let length = slideBarDom.children.length;
        for (let i = 0; i < length; i++) {
            let liDom = document.createElement('li');
            // 如果是第一个li标签添加active样式
            i == 0 && (liDom.className = 'active');
            // 增加自定义属性记录小圆点的序号 目的是为了当点击小圆点时可以获取到点击的是第几个
            liDom.setAttribute('data-index', i);
            dotBarDom.appendChild(liDom)
        }
    }
</script>